<template>
  <div class="left-bottom">
    <div class="top-bar">
      <div class="bar-item" v-for="(item, index) in top" :key="index">
        <div class="bar-title">{{item.名称}}</div>
        <div class="bar-content">
          <span class="bar-tag" :style="{backgroundColor: item.颜色}">{{index + 1}}</span>
          <span>{{item.值}}</span>
          <span>{{item.单位}}</span>
        </div>
      </div>
    </div>

    <div class="top-main">
      <div class="top-main-inner">
        <div class="grid-item" v-for="(item, index) in list" :key="index">
          <span class="bar-tag" :style="{backgroundColor: item.颜色}">{{index + 4}}</span>
          <span>{{item.名称}}：</span>
          <span>{{item.值}}</span>
          <span>{{item.单位}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'left-bottom',
  cnName: '左下',
  props: {
    data: Object
  },
  data() {
    return {
      top: [],
      list: []
    }
  },
  methods: {
    init() {
      const top = this.data.列表.slice(0, 3)
      const list = this.data.列表.slice(3)
      this.top = top
      this.list = list
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.left-bottom {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  font-size: 14px;

  .top-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    .bar-item {
      width: 31%;
      background-color: rgba(0,82,177, .25);
      border-radius: 3px;
      padding: 3px 8px;

      .bar-title {
        font-size: 15px;
      }
    }
  }
  .top-main {
    flex: 1;
    position: relative;
    .top-main-inner {
      position: absolute;
      height: 100%;
      width: 100%;

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 2px;

      .grid-item {
        zoom: 0.9;
        background-color: rgba(0, 82, 177, 0.25);
        padding: 1px 4px;
      }

    }
  }

  .bar-tag {
    border-radius: 3px;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 2px;
  }


}
</style>
